import React, { useState } from "react";
import { Toggle } from "@/components/ui/toggle";

const TouchNoneVisualization: React.FC = () => {
  const [isTouchNone, setIsTouchNone] = useState(false);
  const [normalScrollPosition, setNormalScrollPosition] = useState(0);
  const [touchNoneScrollPosition, setTouchNoneScrollPosition] = useState(0);

  const handleNormalScroll = (e: React.UIEvent<HTMLDivElement>) => {
    setNormalScrollPosition(e.currentTarget.scrollTop);
  };

  const handleTouchNoneScroll = (e: React.UIEvent<HTMLDivElement>) => {
    setTouchNoneScrollPosition(e.currentTarget.scrollTop);
  };

  return (
    <div className="container mx-auto p-4 space-y-8">
      <h1 className="text-3xl font-bold text-center">touch-none 可视化演示</h1>

      <div className="flex justify-center items-center space-x-4">
        <span className="text-lg font-medium">启用 touch-none:</span>
        <Toggle
          pressed={isTouchNone}
          onPressedChange={setIsTouchNone}
          aria-label="Toggle touch-none"
        >
          {isTouchNone ? "开启" : "关闭"}
        </Toggle>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        <div className="space-y-4">
          <h2 className="text-2xl font-semibold">正常滚动区域</h2>
          <div
            className="w-full h-64 border-4 border-blue-500 overflow-auto"
            onScroll={handleNormalScroll}
          >
            <div className="p-4 space-y-4">
              {Array.from({ length: 20 }).map((_, index) => (
                <p key={index} className="text-lg">
                  这是正常滚动区域的第 {index + 1} 行文本。
                </p>
              ))}
            </div>
          </div>
          <p>滚动位置: {normalScrollPosition}px</p>
        </div>

        <div className="space-y-4">
          <h2 className="text-2xl font-semibold">touch-none 区域</h2>
          <div
            className={`w-full h-64 border-4 border-green-500 overflow-auto ${
              isTouchNone ? "touch-none" : ""
            }`}
            onScroll={handleTouchNoneScroll}
          >
            <div className="p-4 space-y-4">
              {Array.from({ length: 20 }).map((_, index) => (
                <p key={index} className="text-lg">
                  这是 touch-none 区域的第 {index + 1} 行文本。
                </p>
              ))}
            </div>
          </div>
          <p>滚动位置: {touchNoneScrollPosition}px</p>
        </div>
      </div>

      <div className="bg-gray-100 p-6 rounded-lg">
        <h2 className="text-2xl font-semibold mb-4">touch-none 解释</h2>
        <p className="mb-4">
          Tailwind CSS 中的{" "}
          <code className="bg-gray-200 px-1 rounded">touch-none</code> 类等同于
          CSS 中的{" "}
          <code className="bg-gray-200 px-1 rounded">touch-action: none;</code>
          。
          它禁用了元素上的所有触摸操作，包括平移、缩放和滚动。这在以下情况下非常有用：
        </p>
        <ul className="list-disc list-inside space-y-2">
          <li>防止用户在自定义滚动或拖拽实现中进行默认的触摸操作</li>
          <li>在画布或游戏元素上禁用浏览器的默认触摸行为</li>
          <li>实现自定义的手势控制，而不受浏览器默认行为的干扰</li>
          <li>在某些交互元素上防止意外的滚动或缩放</li>
        </ul>
        <p className="mt-4">
          注意：在桌面设备上，你可能看不到明显的区别。这个属性主要影响触摸设备的行为。
          在触摸设备上，启用 touch-none
          的区域将无法通过触摸滚动，但仍可以使用滚动条滚动。
        </p>
      </div>
    </div>
  );
};

export default TouchNoneVisualization;
